<template>
	<view class="">
		<!-- 定制房产介绍组件 -->
		<imglist />
		<view title="房产信息" class="houseInfo" style=" ">
			<view style="padding-left: 20px;">
				<view class="tag" style="width: 30px;color: #fff;background-color:#6C7177 ;">
					在售</view>
				<view class="tag" style="width: 60px;color: #6C7177;">
					品牌房企</view>
				<!-- 				<view class="tag" style="width: 70px;color: #6C7177;">
					郑州北龙湖</view> -->
				<view class="tag" style="width: 70px;color: #6C7177;">
					{{realEstate.projectLabel}}
				</view>
			</view>
			<view style="float: right;padding-right: 20px;color: #909399; font-size: x-small;" @click="toDetail">
				更多详情 >
			</view>
			<view style="margin-left: 20px;margin-top: 30px;">
				<text style="font-size: x-large;color: #000000;">{{realEstate.realEstateProjectName}}</text>
			</view>
			<view style="margin-left: 20px;">
				<text style="font-size: x-small; ">备案名：{{realEstate.recordName}}</text>
			</view>
			<view style="margin-left: 20px;">
				<text
					style="color: #FF352F;font-size:large;margin-top: 20px;display: block;">约{{realEstate.minimumPrice}}-{{realEstate.maximumPrice}}万元/套</text>
			</view>

			<view style="margin-left: 20px;">
				<text style="color: #A9A9A9;font-size:small;margin-top: 10px;display: block;font-weight:400;">开盘：
					<text
						style="display: inline-block;color: #000000;font-family: 微软雅黑;">{{realEstate.openTime}}</text></text>
			</view>

			<view style="margin-left: 20px;">
				<text style="color: #A9A9A9;font-size:small;margin-top: 10px;display: block;font-weight:400;">地址：
					<text
						style="display: inline-block;color: #000000;font-family: 微软雅黑;">{{realEstate.projectAddress}}</text></text>
			</view>
			<view style="margin-top: 30px;">
				<view class="houseButton" style="margin-left: 20px;margin-right: 20px;" @click="notice('change')">
					<uni-icons custom-prefix="iconfont" type="icon-bianjia" size="15" style="margin-right: 5px;">
					</uni-icons>
					<text style=" color:#6C7177;line-height: 45px;">
						变价通知
					</text>

				</view>

				<view class="houseButton" @click="notice('open')">
					<uni-icons custom-prefix="iconfont" type="icon-tongzhi" size="15" style="margin-right: 5px;">
					</uni-icons>
					<text style="color: #6C7177;line-height: 45px;">开盘通知</text>
				</view>
			</view>

		</view>

		<uni-section type="line">
			<uni-card title="置业顾问" :is-shadow="false" extra="更多详情 >">
				<view class="item-box" v-for="(item,i) in consultantList" :key="i" style="">
					<image class="avatar" :src="'https://www.f-cloud.top/web/file/图片/'+item.consultantAvatar" mode=""></image>
					<text class="wenzi" style="margin-left: 60px;">{{item.consultantName}}</text>
					</br>
					<text class="wenzi" style="margin-left: 60px;">置业顾问</text>

					<view class="call" @click="call(item.consultantPhone)">
						<text>联系</text>
					</view>
				</view>
			</uni-card>
		</uni-section>
		<view class="houseTypeBox" style="margin-bottom: 15px;">
			<view>
				<view class="" style="float: left;padding-left: 20px;">
					<text>户型介绍</text>
				</view>
				<view style="float: right;padding-right: 20px;color: #909399; font-size: x-small;"
					@click="toHouseTypeDetail">
					更多详情 >
				</view>
				<view class="line" style="position: relative;top:40px"></view>
				<br />
				<scroll-view class="scroll-view_H" scroll-x=true scroll-y="false" @scroll="scroll" show-scrollbar="true"
					scroll-left="120">
					<view class="scroll-view-item_H uni-bg-red" v-for="(item,index) in houseTypeList" :key="index"
						@click="previewImage(index,item.houseTypeUrl)">
						<image :src="item.houseTypeUrl"
							mode="aspectFill"></image>
					</view>

				</scroll-view>
			</view>
			<view class="uni-common-pb"></view>
		</view>
		<view title="项目区位" class="location">
			<view class="" style="float: left;padding-left: 20px;">
				<text>项目区位</text>
			</view>

			<view class="uni-common-mt" style="margin-top: 60px;">
				<view>
					<map :latitude="latitude" :scale="scale" :longitude="longitude" :markers="covers">
					</map>
				</view>
			</view>
			<view class="" style="margin-top: 20px;height:500px;">
				<view style="width: 750rpx;height: 80px;margin-left: 40px;">
					<view class="" style="height: 30px;width: 60px; float:left;margin-right: 10px;"
						@click="specific('school')">
						<view class="t-icon t-icon-school"
							style="margin-left: 20px;margin-right: 40px;margin-left: 18px;">
						</view>
						<text class="icon" style="margin-left: 20px;">学校</text>
					</view>
					<view class="" style="height: 30px;width: 60px; float:left;margin-right: 10px;"
						@click="specific('hospital')">
						<view class="t-icon t-icon-yunyiyuan" style="margin-right: 40px; margin-left: 20px;"></view>
						<text class="icon">医院</text>
					</view>
					<view class="" style="height: 30px;width: 60px; float:left;margin-right: 10px;"
						@click="specific('bus')">

						<view class="t-icon t-icon-gongjiaoche" style="margin-right: 40px;margin-left: 20px;"></view>
						<text class="icon">交通</text>
					</view>
					<view class="" style="height: 30px;width: 60px; float:left;margin-right: 10px; "
						@click="specific('shopping')">

						<view class="t-icon t-icon-gouwu" style="margin-right: 40px;margin-left: 20px;"></view>
						<text class="icon">购物</text>
					</view>
				</view>
				<view class="schoolBox" v-show="flag ===1">
					<view class="line"></view>
					<view class="" v-for="(item,index) in schoolList" :key="index">
						<uni-icons type="location"
							style="float:right;padding-right:0px;margin-right: 40px;margin-top:8px;"></uni-icons>
						<text
							style="padding-left: 40px;color: #898F96;padding-right: 10px; font-size: small;position: relative; top: 10px; ">{{item.locationName}}</text>
						<text
							style="padding-right: 0px;color:#898F96;float:right;font-size:small;position:relative;top:10px;">{{item.locationDistance}}
						</text>
						<view class="line"></view>
						<br />
					</view>
				</view>
				<view class="busBox" v-show="flag ===2">
					<view class="" v-for="(item,index) in busList" :key="index">
						<view class="line"></view>
						<uni-icons type="location"
							style="float:right;padding-right:0px;margin-right: 40px;margin-top:8px;"></uni-icons>

						<text
							style="padding-left: 40px;color: #898F96;padding-right: 10px; font-size: small;position: relative; top: 10px; ">{{item.locationName}}</text>
						<text
							style="padding-right: 0px;color:#898F96;float:right;font-size:small;position:relative;top:10px;">{{item.locationDistance}}
						</text>
						<br />
					</view>


				</view>
				<view class="shopBox" v-show="flag ===3">
					<view class="" v-for="(item,index) in shopList" :key="index">
						<view class="line"></view>
						<uni-icons type="location"
							style="float:right;padding-right:0px;margin-right: 40px;margin-top:8px;"></uni-icons>

						<text
							style="padding-left: 40px;color: #898F96;padding-right: 10px; font-size: small;position: relative; top: 10px; ">{{item.locationName}}</text>
						<text
							style="padding-right: 0px;color:#898F96;float:right;font-size:small;position:relative;top:10px;">{{item.locationDistance}}
						</text>

						<br />
					</view>
				</view>
				<view class="hospitalBox" v-show="flag ===4">
					<view class="" v-for="(item,index) in hospitalList" :key="index">
						<view class="line"></view>
						<uni-icons type="location"
							style="float:right;padding-right:0px;margin-right: 40px;margin-top:8px;"></uni-icons>
						<text
							style="padding-left: 40px;color: #898F96;padding-right: 10px; font-size: small;position: relative; top: 10px; ">{{item.locationName}}</text>
						<text
							style="padding-right: 0px;color:#898F96;float:right;font-size:small;position:relative;top:10px;">{{item.locationDistance}}
						</text>


						<br />
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import imglist from '../img-List/shangheyuan/shangheyuan.vue';
	export default {
		components: {
			imglist
		},
		data() {
			return {
				baseUrl: 'https://www.f-cloud.top/web',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				schoolList: [],
				busList: [],
				shopList: [],
				realEstate: {},
				hospitalList: [],
				//永威枫林上院 114.54402,37.912211
				title: 'map',
				scale: 16,
				latitude: 34.798023,
				longitude: 113.748924,
				infoRes: {},
				flag: 1,
				covers: [{
					id: 1,
					width: 40,
					height: 40,
					latitude: 34.7975,
					longitude: 113.748969,
					// iconPath: '../../static/app-plus/location@3x.png',
					iconPath: '../../static/map/定位.png',
				}],
				houseTypeList: [],
				houseTypeUrl: [],
				consultantList: []
			}
		},
		onLoad(options) {
			var id = options.id
			console.log("传参", id);
			if(id == '40440638208400'){
				this.longitude ='113.545362'; 
				this.latitude = '34.808672';
			}
			uni.request({
					url: this.baseUrl + '/api/realEstateProjectDetail/getById/' + id,
					success: (res) => {
						console.log('realEstateProjectDetail;', res.data);
						this.realEstate = res.data;
						uni.setStorageSync('realEstate', this.realEstate);
					}
				}),
				uni.request({
					url: this.baseUrl + '/api/consultant/getConsultant/' + id,
					success: (res) => {
						console.log('getConsultant', res.data);
						this.consultantList = res.data;
						uni.setStorageSync('consultant', this.consultantList);

					}
				}),
				uni.request({
					url: this.baseUrl + '/api/houseType/getHouseType/' + id,
					success: (res) => {
						console.log('getHouseType', res.data);
						this.houseTypeList = res.data;
						for (var i = 0; i < this.houseTypeList.length; i++) {
							var ele = this.houseTypeList[i];
							this.houseTypeUrl.push(ele.houseTypeUrl);
						};
						uni.setStorageSync('houseType', this.houseTypeList);

					}
				}),
				uni.request({
					url: this.baseUrl + '/api/location/getLocation/' + id,
					success: (res) => {
						console.log('getLocation', res.data);
						for (let i = 0; i < res.data.length; i++) {
							var ele = res.data[i]
							if (ele.locationCategoryId == "1") {
								this.busList.push(ele);
							} else if (ele.locationCategoryId == "2") {
								this.hospitalList.push(ele);
							} else if (ele.locationCategoryId == "3") {
								this.schoolList.push(ele)
							} else {
								this.shopList.push(ele);
							}
						}

					}
				})
		},
		methods: {
			previewImage(index, url) {
				console.log('url', url)
				uni.previewImage({
					current: index,
					urls: this.houseTypeUrl //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			scroll(e) {

				this.old.scrollTop = e.detail.scrollTop
			},
			call(value) {
				console.log('value', value)
				uni.makePhoneCall({
					phoneNumber: value
				})
			},
			specific(value) {
				console.log('value', value)
				this.flag = value;
				if (value == 'school') {
					this.flag = 1
				} else if (value == 'bus') {
					this.flag = 2
				} else if (value == 'shopping') {
					this.flag = 3
				} else {
					this.flag = 4
				};
				console.log('this.flag', this.flag)
			},
			notice(value) {
				// 获取用户信息
				console.log('login', value)
				let that = this;
				// 获取用户信息
				if (uni.getStorageSync('userInfo')) {
					if (value == 'open') {
						uni.showModal({
							content: '预约成功,开盘通知后期会给您推送到微信!'
						})
					} else {
						uni.showModal({
							content: '预约成功,变价通知后期会给您推送到微信!'
						})
					}
				} else {
					uni.getUserProfile({
						desc: '获取您的昵称,头像,地区等信息',
						success: infoRes => {
							//console.log(JSON.stringify(infoRes))
							if (infoRes.errMsg ===
								'getUserProfile:ok') {
								that.infoRes = infoRes;
								// 获取到的当前数据存入缓存
								uni.setStorageSync('userInfo',
									infoRes.userInfo);

								if (value = 'open') {
									uni.showModal({
										content: '预约成功,开盘通知后期会给您推送到微信!'
									})
								} else {
									uni.showModal({
										content: '预约成功,变价通知后期会给您推送到微信!'
									})
								}
							} else {
								uni.showToast({
									title: '授权失败',
									icon: 'error'
								});
							}
						}
					})
					uni.getProvider({
						service: 'oauth',
						success: (res) => {
							console.log('res.provider', res.provider)
							if (~res.provider.indexOf('weixin')) {
								uni.login({
									provider: 'weixin',
									success: (loginRes) => {
										console.log('登录信息', JSON.stringify(loginRes))
										uni.request({
											url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wx7f51841c594adb66&secret=8743caeeb989951d80c4dc93c25a1008&js_code=' +
												loginRes.code +
												'&grant_type=authorization_code',
											success: (res) => {
												console.log('open', res.data.openid)
												// TODO 请求后端接口存储用户信息

											}
										})
									}
								})
							}
						}
					})
				}

			},
			toDetail() {
				uni.navigateTo({
					url: '../realEstateDetail/realEstateDetail'
				})
			},
			toHouseTypeDetail() {
				uni.navigateTo({
					url: '../houseTypeDetail/houseTypeDetail'
				})
			}


		}
	}
</script>

<style>
	@import "@/static/icon/iconfont.css";
	@import url("@/static/icon/iconfont-weapp-icon.css");

	map {
		width: 100%;
		height: 400rpx;
	}

	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		padding-top: 30px;
		margin-top: 20px;

		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {

		display: inline;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.line {
		position: relative;
		top: 10px;
		height: 1px;
		width: 550rpx;
		background-color: #F0F0F0;

		margin-left: 40px;
		text-align: center;
		margin-top: 10px;
	}

	.call {

		border: 1px solid #787D82;
		border-radius: 16px;
		width: 60px;
		position: relative;
		top: -13px;
		float: right;
		text-align: center;
	}

	.icon {
		margin-top: 30px;
		color: #A9A9A9;
		font-size: small;
		font-weight: 400;
		margin-left: 22px;
	}

	.schoolBox {
		height: 500rpx;
		padding-top: 15px;
		width: 700rpx;
		border-left: 20px;
		margin: 0 auto;
		background-color: #FFFFFF;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
	}

	.busBox {
		height: 500rpx;
		padding-top: 15px;
		width: 700rpx;
		border-left: 20px;

		margin: 0 auto;
		background-color: #FFFFFF;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
	}

	.shopBox {
		height: 500rpx;
		padding-top: 15px;
		width: 700rpx;
		border-left: 20px;

		margin: 0 auto;
		background-color: #FFFFFF;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
	}

	.hospitalBox {
		height: 500rpx;
		padding-top: 15px;
		width: 700rpx;
		border-left: 20px;

		margin: 0 auto;
		background-color: #FFFFFF;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
	}

	.t-icon {
		width: 30px;
		height: 30px;
	}

	.houseButton {
		border: 1px solid #6C7177;
		border-radius: 6px;

		width: 150px;
		height: 50px;
		float: left;
		text-align: center;
	}

	.img-list {
		display: flex;
		flex-direction: column;
	}

	.avatar {
		border-radius: 50%;
		width: 50px;
		height: 50px;
		position: absolute;
		left: 30px;
		margin-right: 30px;
	}

	.location {
		height: 1200rpx;
		padding-top: 15px;
		width: 700rpx;
		border-left: 20px;
		margin: 0 auto;
		background-color: #FCFBFB;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
	}

	.houseInfo {

		height: 600rpx;
		padding-top: 15px;
		width: 700rpx;
		border-left: 20px;
		margin: 0 auto;
		/* 		text-align: center;
 */
		background-color: #FCFBFB;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
	}

	.houseTypeBox {
		white-space: nowrap;
		overflow-x: auto;
		height: 560rpx;
		padding-top: 15px;
		width: 700rpx;
		border-left: 20px;
		margin: 0 auto;
		background-color: #FCFBFB;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
	}

	.tag {
		margin-right: 6px;
		float: left;
		border: 1px solid #000;
		border-radius: 3px;
		height: 18px;
		font-size: smaller;
		text-align: center;
		bottom: 30px;
	}

	.item-box {
		margin-top: 5px;
	}
</style>
